import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Radio, Button, Spin } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { routerRedux } from 'dva/router';

import { getParamUrl, heightTwoMain, myMessage } from '../../utils/formatDataSource';

@connect(({ pingce, loading }) => ({
  pingce,
  loading: loading.effects['pingce/getValue'],
}))
class PingCe extends PureComponent {
  state = {
    data: [],
    saveData: [],
    showBtn: true,
    studentId: '',
  };
  componentDidMount = () => {
    this.initData();
  };
  initData = () => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    dispatch({
      type: 'pingce/getValue',
      payload: params,
    }).then(() => {
      const { data } = this.props.pingce;
      let { showBtn } = this.state;
      if (data.length > 0) {
        const value = data[0].value;
        if (value.length > 0) {
          const stem = value[0];
          if (stem.defaultAnswer !== 0) {
            showBtn = false;
          }
        }
      } else {
        showBtn = false;
      }
      this.setState({
        studentId: params.studentId,
        data: this.props.pingce.data,
        showBtn,
      });
    });
  };
  getHeadDom = () => {
    const { data } = this.state;
    const RadioGroup = Radio.Group;
    return data.map((d, i) => {
      return (
        <div key={i}>
          <div style={{ fontSize: '20px', marginBottom: '15px' }}>
            <strong>{d.head}</strong>
          </div>
          <div style={{ marginBottom: '20px' }}>
            {d.value.map((v, i) => {
              return (
                <div key={i}>
                  <div style={{ marginBottom: '10px' }}>
                    {v.sort}.{v.title}
                  </div>
                  <div style={{ marginBottom: '10px' }}>
                    <RadioGroup
                      onChange={e => {
                        return this.changeRadio(e.target.value, v);
                      }}
                      value={v.defaultAnswer}
                    >
                      {v.answer.map((a, i) => (
                        <Radio
                          value={a.id}
                          style={{ marginRight: '60px' }}
                          key={i}
                          disabled={!this.state.showBtn}
                        >
                          {a.content}
                        </Radio>
                      ))}
                    </RadioGroup>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      );
    });
  };
  changeRadio = (e, v) => {
    const { data } = this.state;
    v.defaultAnswer = e;
    this.setState({ data: [...data] });
  };
  submit = () => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    const { data } = this.state;
    const submitArr = [];
    let isOk = true;
    data.map(d => {
      const { value } = d;
      value.map(v => {
        if (v.defaultAnswer === 0) {
          isOk = false;
        }
        submitArr.push({
          studentId: params.studentId,
          type: params.type,
          valueId: v.defaultAnswer,
        });
      });
    });
    if (!isOk) {
      myMessage.error('请设置完所有题目后，再进行提交', 2);
      return;
    }
    dispatch({
      type: 'pingce/save',
      payload: submitArr,
    }).then(() => {
      this.initData();
    });
  };
  backPage = () => {
    this.props.dispatch(
      routerRedux.push(`/studentManage/student/info?studentId=${this.state.studentId}`)
    );
  };
  render = () => {
    const { data } = this.props.pingce;
    return (
      <PageHeaderLayout>
        <Card style={{ textAlign: 'right' }} bordered={false}>
          <Button type="primary" size="small" onClick={this.backPage}>
            返回
          </Button>
        </Card>
        <Card style={{ minHeight: heightTwoMain }} bordered={false}>
          <Spin tip="Loading..." spinning={this.props.loading}>
            {this.getHeadDom()}
          </Spin>
        </Card>
        <Card bordered={false}>
          <Button type="primary" onClick={this.submit} hidden={!this.state.showBtn}>
            提交
          </Button>
        </Card>
      </PageHeaderLayout>
    );
  };
}

export default PingCe;
